
<style type="text/css">
.imglist{
    margin-left: 0px;
}    
</style>
<div class="main-content imglist">
    <div class="page-content">
        <div class="row-fluid">
            <div class="col-xs-12">
                <include file="bar" />
                <div class="widget-box">
                    <div class="widget-header header-color-blue">
                        <h5 class="bigger lighter">
                            <i class="icon-table"></i>
                            上传图片
                        </h5>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            <form id="myform" method="post" action="{:U('Member/Index/upimg')}">
                                <input type="file" name="avatar" />
                                
                                <div class="hr hr-12 dotted"></div>
                                
                                <button type="submit" class="btn btn-sm btn-primary">上传</button>
                                <button type="reset" class="btn btn-sm">重选</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xs-12">
                <include file="bar" />
                <div class="widget-box">
                    <div class="widget-header header-color-blue">
                        <h5 class="bigger lighter">
                            <i class="icon-picture"></i>
                            已上传,单击选择
                        </h5>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            <ul class="ace-thumbnails">
                                <volist name="volist" id="vo">
                                <li>
                                    <a href="{$vo.picurl}" >
                                        <img style="width:120px;height:200px;" src="{$vo.picurl}" />
                                        <div class="tags">
                                            <span class="label-holder">
                                                <span class="label label-warning arrowed-in">{$vo.picname}</span>
                                            </span>
                                        </div>
                                    </a>
                                </li>
                                </volist>
                                <div class="clearfix"></div>
                            </ul>
                                <div class="clearfix"></div>
                        </div>
                                <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(function() {
    $('.ace-thumbnails').find('a').on('click',function(){
        var picurl = $(this).attr('href');
        var to = "{$Think.get.to}";
        $('input[name='+to+']').val(picurl);
        $( "#img-dialog" ).dialog('close');
        return false;
    })

    var $form = $('#myform');
    var file_input = $form.find('input[type=file]');
    var upload_in_progress = false;
    
    file_input.ace_file_input({
        style : 'well',
        btn_choose : '将图片拖到这里或单击选择图片',
        btn_change: null,
        droppable: true,
        thumbnail: 'large',

        before_remove: function() {
            if(upload_in_progress)
                return false;//if we are in the middle of uploading a file, don't allow resetting file input
            return true;
        },

        before_change: function(files, dropped) {
            var file = files[0];
            if(typeof file == "string") {
                if(!(/\.(jpe?g|png|gif)$/i).test(file) ) {
                    alert('请选择图片文件!');
                    return false;
                }
            }else{
                var type = $.trim(file.type);
                if(( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type)) || ( type.length == 0 && ! (/\.(jpe?g|png|gif|jpg|JPG|jpeg)$/i).test(file.name) )
                    ) {
                        alert('请选择图片文件!');
                        return false;
                    }

                if( file.size > 220000 ) {
                    alert('文件不能大雨 200Kb!');
                    return false;
                }
            }

            return true;
        }
    });
    
    $form.on('submit', function() {
        var submit_url = $form.attr('action');
        if(!file_input.data('ace_input_files')) return false;//no files selected
        
        var deferred ;
        if( "FormData" in window ) {
            //for modern browsers that support FormData and uploading files via ajax
            var fd = new FormData($form.get(0));
        
            //if file has been drag&dropped , append it to FormData
            if(file_input.data('ace_input_method') == 'drop') {
                var files = file_input.data('ace_input_files');
                if(files && files.length > 0) {
                    fd.append(file_input.attr('name'), files[0]);
                    //to upload multiple files, the 'name' attribute should be something like this: myfile[]
                }
            }

            upload_in_progress = true;
            deferred = $.ajax({
                url: submit_url,
                type: $form.attr('method'),
                processData: false,
                contentType: false,
                dataType: 'json',
                data: fd,
                xhr: function() {
                    var req = $.ajaxSettings.xhr();
                    if (req && req.upload) {
                        req.upload.addEventListener('progress', function(e) {
                            if(e.lengthComputable) {    
                                var done = e.loaded || e.position, total = e.total || e.totalSize;
                                var percent = parseInt((done/total)*100) + '%';
                                //percentage of uploaded file
                            }
                        }, false);
                    }
                    return req;
                },
                beforeSend : function() {
                },
                success : function() {
                    
                }
            })

        }
        else {
            upload_in_progress = true;
            deferred = new $.Deferred
            
            var iframe_id = 'temporary-iframe-'+(new Date()).getTime()+'-'+(parseInt(Math.random()*1000));
            $form.after('<iframe id="'+iframe_id+'" name="'+iframe_id+'" frameborder="0" width="0" height="0" src="about:blank" style="position:absolute;z-index:-1;"></iframe>');
            $form.append('<input type="hidden" name="temporary-iframe-id" value="'+iframe_id+'" />');
            $form.next().data('deferrer' , deferred);//save the deferred object to the iframe
            $form.attr({'method' : 'POST', 'enctype' : 'multipart/form-data',
                        'target':iframe_id, 'action':submit_url});

            $form.get(0).submit();
            
            //if we don't receive the response after 60 seconds, declare it as failed!
            setTimeout(function(){
                var iframe = document.getElementById(iframe_id);
                if(iframe != null) {
                    iframe.src = "about:blank";
                    $(iframe).remove();
                    
                    deferred.reject({'status':'fail','message':'Timeout!'});
                }
            } , 60000);
        }
        
        deferred.done(function(result){
            upload_in_progress = false;
            
            if(result.status == 'OK') {
                var li = $("<li><a href="+result.url+" ><img style=\"width:120px;height:200px;\" src="+result.url+" /> </a></li>"); 
                $('.ace-thumbnails').append(li);
                file_input.ace_file_input('reset_input');
                $('.ace-thumbnails').find('a').on('click',function(){
                    var picurl = $(this).attr('href');
                    var to = "{$Think.get.to}";
                    $('input[name='+to+']').val(picurl);
                    $( "#img-dialog" ).dialog('close');
                    return false;
                })
            }
            else {
                alert("文件保存失败. " + result.message);
            }
        }).fail(function(res){
            upload_in_progress = false;
            alert("发生异常错误");                        
            //console.log(result.responseText);
        });

        deferred.promise();
        return false;
    });
    
    $form.on('reset', function() {
        file_input.ace_file_input('reset_input');
    });


});
</script>

</body>
</html>
